import { defineStore } from "pinia";
import { ref } from "vue";
import type { MenuType } from "../router/routerType";

// 由于pinia是挂载在main.ts中的所以为了防止浏览器初始化拿不到数据
// 下载 npm install pinia-plugin-persistedstate
const localData = localStorage.getItem("pz_v3pz");

function initState() {
  return {
    isCollapse: false, // 是否折叠
    selectMenu: [] as Array<MenuType>,
    // 动态路由的数据
    routerList: [],
    menuActive: "",
  };
}

export const CounterStore = defineStore(
  "allState",
  () => {
    // ref() 就是 state 属性
    // computed() 就是 getters
    // function() 就是 actions
    // 判断是否存在localStorage中的数据
    const state = localData
      ? ref(JSON.parse(localData).state)
      : ref(initState());

    // 修改数据中的component的数据
    function dynamicMenu(data: any) {
      // 通过glob导入文件
      const modules = import.meta.glob("../views/**/**/*.vue");
      function routerSet(router: any) {
        router.forEach((route: any) => {
          // 判断没有子路由，拼接路由数据
          if (!route.children) {
            const url = `../views${route.meta.path}/index.vue`;
            // 拿到获取的vue组件
            route.component = modules[url];
          } else {
            routerSet(route.children);
          }
        });
      }
      routerSet(data);
      // 拿到完整的路由数据
      state.value.routerList = data;
    }

    return {
      state,
      dynamicMenu,
    };
  },
  // 持久化存储
  {
    persist: {
      key: "pz_v3pz",
    },
  }
);
